import { createStore } from 'vuex'
// 持久化管理信息
import createPersistedState from 'vuex-persistedstate';
// 用户的状态导入进来
import user from '@/store/module/user.js'
//登录的状态导入进来
import login from '@/store/module/login.js'

// 本地缓存vuex管理信息
// 为什么要适应vuex-persist组件，因为vuex数据库如果不持久化有一个bug
// 当然用户刷新F5或者右键刷新的时候，vuex数据就会自动丢失。
//持久化插件persistedstate配置
/*const sessionStoragePlugin = createPersistedState({
    key: 'sessionStorageKey', // Session Storage 的 key
    storage: window.sessionStorage, // 使用 Session Storage 存储
    paths: ['login'], // 保存在 Session Storage 中的模块或状态路径
})

const localStoragePlugin = createPersistedState({
    key: 'localStorageKey', // Local Storage 的 key
    storage: window.localStorage, // 使用 Local Storage 存储
    paths: ['user'], // 仅保存在 Local Storage 中的模块或状态路径
})*/

// 创建一个新的 store 实例
// 创建状态管
const store = createStore({
    state:{
        //状态管理器中定义的数据源
        isTabbarShow:true,
        // 初始化状态
        dataList:[
            {title:'吃饭',complete:true},
            {title:'睡觉',complete:false},
            {title:'打豆豆',complete:false},
        ]
    },
    mutations:{
        //同步操作
    },
    actions:{
        //异步操作
    },
    //getters相当于计算属性
    getters:{},

    modules: {
        user,login
    },
    plugins: [
        // 持久化插件
        // vuex持久化配置，默认存储在localstorage中
        createPersistedState({
            // 存储数据的键名，默认是vuex
            key: 'vuex',
            // 存储数据中的哪些数据（如果是模块下具体的数据需要加上模块名称，如 user.token）
            paths: ['user', 'login']
        })
    ],
})

// 导出状态管理
export default store;
